/**
* Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
* All Rights Reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are NOT permitted except as agreed by
* iAuto (Shanghai) Co., Ltd.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*/
import React, { useEffect } from 'react';
import { connect } from 'dva';
import { getStatusText, Task, TaskModel } from '@/models/soaTask';
import { Button, Modal, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { initLocalStorage } from '@/utils';

const RequestSequence: React.FC<TaskModel['state']> = ({
  tasks,
  disabled,
  taskTotal,
  current,
  dispatch,
}) => {
  console.log('🚀 ~ file: index.tsx ~ line 6 ~ RequestSequence ~ tasks', tasks);

  const handleOk = () => {
    // 清空任务
    dispatch({
      type: 'task/clearTasks',
    });
    initLocalStorage();
  };

  const handleCancel = () => {
    //
  };

  const columns: ColumnsType<Task> = [
    {
      title: '序号',
      dataIndex: 'id',
      // width: '50px',
      render(value, record, index) {
        return <>{index + 1}</>;
      },
    },
    {
      title: '品牌',
      dataIndex: 'brandName',
      width: '100px',
    },
    {
      title: '车系',
      dataIndex: 'seriesName',
      width: '100px',
    },
    {
      title: '车型',
      dataIndex: 'modelName',
      width: '300px',
    },
    {
      title: '版本',
      dataIndex: 'version',
      width: '150px',
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: '100px',
      fixed: 'right',
      
      render(value) {
        return <div style={{ color: getColor(value), textAlign: 'center' }}>{getStatusText(value)}</div>;
      },
    },
  ];

  const getColor = (value: Task['status'] | 0 = 0) => {
    switch (value) {
      case 2: {
        return '#1890ff';
      }
      case 3: {
        return '#02830f';
      }
      case 4: {
        return '#d9001b';
      }
      case 1:
      default: {
        return '#000000';
      }
    }
  };

  useEffect(() => {
    if (tasks.length > 10) {
      const completedTasksCount = tasks.filter(task => task.status === 3).length;
      const tableBody = document.querySelector('#tasks .ant-table-body .ant-table-tbody');
      const taskNodes = tableBody.childNodes;

      if (taskNodes.length > completedTasksCount + 1) {
        taskNodes[completedTasksCount + 1].scrollIntoView({ behavior: 'smooth' });
      }
    }
  }, [tasks]);


  return (
    <Modal
      title="导入中"
      visible={tasks.length}
      onOk={handleOk}
      onCancel={handleCancel}
      closable={false}
      width="50%"
      footer={[
        <Button key="submit" type="primary" onClick={handleOk} disabled={disabled}>
          {disabled ? `${current}/${taskTotal} 导入中...` : '确认'}
        </Button>,
      ]}
    >
      <div style={{ width: '100%', height: '100%' }}>
        <Table
          id='tasks'
          size="small"
          style={{ width: '100%' }}
          scroll={{ y: 400, x: 800 }}
          dataSource={tasks}
          columns={columns}
          pagination={false}
          rowKey='id'
        />
      </div>
    </Modal>
  );
};

export default connect(({ task }: { task: TaskModel['state'] }) => {
  return task;
})(RequestSequence);
